1 00:00:00,750 --> 00:00:01,840 Hello and welcome. 2 00:00:01,860 --> 00:00:12,670 In this lecture we are going to create the functionality for our app using javascript as a programmer 3 00:00:13,230 --> 00:00:22,880 when you have a project to do his best to try as much as possible to break them down in lead to small 4 00:00:22,920 --> 00:00:28,350 actionable steps that will together collectively build the projects. 5 00:00:28,440 --> 00:00:34,210 So these are the steps I have taken to bring down our own task. 6 00:00:34,230 --> 00:00:41,260 So first we need to determine a way to generate a random number between 1 and 500. 7 00:00:41,730 --> 00:00:47,210 Okay next we need to display the previous numbers that have been guessed. 8 00:00:47,220 --> 00:00:49,360 We need to find the way to do that. 9 00:00:49,380 --> 00:00:56,370 Next we need to keep a record of the numbers of attempted guesses followed by this. 10 00:00:56,370 --> 00:01:03,830 We need to display the guesses are wrong and so we need to give the player a clue as to if the guesses 11 00:01:03,860 --> 00:01:06,610 were too high or too low. 12 00:01:06,780 --> 00:01:17,760 Once we also need to find a way to make the game over once the ones they've had ten attempts Okay someone 13 00:01:17,920 --> 00:01:18,770 had 10 up 10. 14 00:01:18,780 --> 00:01:27,030 We need to make sure the game is over and disable the inputs so they can't add any more guesses. 15 00:01:27,030 --> 00:01:31,890 The only way they can really read play the game is to restart it. 16 00:01:31,980 --> 00:01:39,750 So we now look for a way to create the restart button that will allow them to start the game again. 17 00:01:40,260 --> 00:01:41,560 So that's the plan. 18 00:01:43,380 --> 00:01:53,380 The first thing we're going to do we are going to create some variables that we can use to store our 19 00:01:53,410 --> 00:01:56,140 data. 20 00:01:56,440 --> 00:02:06,100 So these are the variables I have created that will use to store the data to create variable you just 21 00:02:06,100 --> 00:02:15,760 type in the key word var followed by the name you want to give the variable variable on line on line 22 00:02:16,460 --> 00:02:18,730 of chord random number. 23 00:02:18,730 --> 00:02:25,530 This is what we'll use to generate the random number between one and five hundred. 24 00:02:25,690 --> 00:02:36,610 So this is calculated using a mathematical algorithm saw using the maths floor method and also we passed 25 00:02:36,610 --> 00:02:36,990 it. 26 00:02:37,120 --> 00:02:43,000 We've passed another method of function into it called Mat's dot random mass. 27 00:02:43,000 --> 00:02:44,320 Top floor archly. 28 00:02:44,350 --> 00:02:49,580 What it does it rounds the number up into the nearest whole number. 29 00:02:49,600 --> 00:02:56,710 Why the mass around is the one that generates the actual random numbers and you've got a. 30 00:02:56,780 --> 00:03:00,890 Times 500 which is the actual number that we all. 31 00:03:00,910 --> 00:03:07,370 That's the maximum and then the plus 1 means you can increase it for anything from zero. 32 00:03:07,420 --> 00:03:27,150 Ok to that 500 line to 3 and 4 are used to store a reference to the result paragraph in our hasty email. 33 00:03:27,610 --> 00:03:37,280 So they will be used to insert values into the paragraphs later on in the code. 34 00:03:37,280 --> 00:03:49,310 The variables on line 5 and 6 are used to store references to the form text input and the submit button. 35 00:03:49,450 --> 00:03:57,200 Okay so they are used to store references to the text input from the form and the submit button and 36 00:03:57,240 --> 00:04:03,420 also they are used to control the Submitting of the guesses. 37 00:04:03,550 --> 00:04:11,150 So later on where you'd be able to submit the guess numbers you used that to control that as well. 38 00:04:11,290 --> 00:04:22,570 The variable on line 7 is used to store a guess count of 1 so is it just the count as he stalls the 39 00:04:22,810 --> 00:04:26,850 number of times that the player has tried. 40 00:04:26,920 --> 00:04:39,460 So he stores a count of 1 which it uses to track how many guesses the player has had while Line 8 is 41 00:04:39,550 --> 00:04:46,840 a reference to the reset button will be creating the button late out so once the game is over and all 42 00:04:46,840 --> 00:04:54,330 the attempts have been use your King press the reset button and the game can be restarted. 43 00:04:55,420 --> 00:05:04,940 I have added a function on line 10 here all the way to line 39. 44 00:05:05,130 --> 00:05:10,930 Call the function check guess saw line 11. 45 00:05:10,960 --> 00:05:22,570 We have declared a variable chord use that guess and set the value to the current value entered inside 46 00:05:22,750 --> 00:05:23,910 the text field. 47 00:05:24,220 --> 00:05:31,790 Right so we also can run these value through the built in number method. 48 00:05:31,810 --> 00:05:38,350 Just make sure the value is definitely in number line 12. 49 00:05:38,350 --> 00:05:42,940 We've got a conditional statement an if statement. 50 00:05:43,360 --> 00:05:48,580 So what the first condition listed menhir from line 12. 51 00:05:48,780 --> 00:05:57,100 Basically conditional code block allows you to run a chord selectively depending on whether it is setting 52 00:05:57,100 --> 00:05:59,430 condition is true or not. 53 00:05:59,680 --> 00:06:04,170 So it looks a bit like a function but not quite function. 54 00:06:04,390 --> 00:06:09,240 So the simplest form of a conditional block starts with a key word. 55 00:06:09,280 --> 00:06:15,890 If he has used the word if on line 12 right then you have some parent he sees. 56 00:06:16,060 --> 00:06:19,120 Then some curly braces inside the parent. 57 00:06:19,120 --> 00:06:24,170 This is we include a test or a check condition. 58 00:06:24,490 --> 00:06:30,490 If the test returns true were wrong the code inside the curly braces. 59 00:06:30,940 --> 00:06:34,460 If the test is false we dont. 60 00:06:34,510 --> 00:06:37,050 We move on to the next bit of code. 61 00:06:37,090 --> 00:06:41,790 In this case the test is tense checking whether the game. 62 00:06:41,950 --> 00:06:49,940 Count variable is equal to one that is whether this is the player's first attempt or not. 63 00:06:52,070 --> 00:06:55,080 It is online talk here we've used troops. 64 00:06:55,120 --> 00:07:01,610 It was to watch me strictly If the guest count is strictly was to one. 65 00:07:02,450 --> 00:07:10,550 So what the saying that if the guess is true if it's a course of one and we make the guests This paragraph 66 00:07:10,580 --> 00:07:14,100 text is Walt's two previous guesses. 67 00:07:14,300 --> 00:07:16,910 If not we don't. 68 00:07:17,090 --> 00:07:17,830 Okay. 69 00:07:17,960 --> 00:07:26,690 The next line of course says the current use I guess value or at current use I guess value that is the 70 00:07:26,720 --> 00:07:34,530 guess is they have made the current user go on line 15. 71 00:07:34,540 --> 00:07:42,300 What the court is saying is that it's give the user an option to enter at a guess and he can see of 72 00:07:42,450 --> 00:07:48,470 what he uses and it guess you Sim plus operator there be blank quotes. 73 00:07:48,500 --> 00:07:52,780 So that's where the text number will go. 74 00:07:52,880 --> 00:07:57,440 The guess number an online 16 we've attached here. 75 00:07:57,470 --> 00:08:00,110 Background call law as a start. 76 00:08:00,310 --> 00:08:01,270 So what. 77 00:08:01,280 --> 00:08:09,650 Or the guess is that the play makes will be recorded on that blue strip of background colour line 17 78 00:08:09,650 --> 00:08:17,270 saying that if the number that the users guess is the random number it the last result the text for 79 00:08:17,270 --> 00:08:19,910 the last result if it matches. 80 00:08:19,970 --> 00:08:27,170 Okay if the last resort does text content if it is a right number then you display a message saying 81 00:08:27,170 --> 00:08:34,270 congratulations you got it right and then it will display a green banner to show the colour. 82 00:08:34,280 --> 00:08:35,170 Right. 83 00:08:35,180 --> 00:08:36,070 Right. 84 00:08:36,080 --> 00:08:41,090 Line 20 law high Tex gives a value. 85 00:08:41,100 --> 00:08:49,420 If the number gets is low or high line 12 one is this set game or that function is called Win. 86 00:08:49,430 --> 00:08:52,240 All the attempts have been used. 87 00:08:52,320 --> 00:08:57,010 Line 22 sane is an else if statement. 88 00:08:57,110 --> 00:09:03,950 The first condition is not true if instead most sane even against count is strictly a cost of 10 that 89 00:09:03,950 --> 00:09:10,340 is abused or their attempt then the last resort the last attempt. 90 00:09:10,580 --> 00:09:19,020 You displayed a test game over them used all detent attempt and then you display low or high. 91 00:09:19,420 --> 00:09:24,880 Don't text content so you display the content where this it was to. 92 00:09:24,890 --> 00:09:26,110 You've got the quotes here. 93 00:09:26,120 --> 00:09:26,690 Weakness. 94 00:09:26,750 --> 00:09:28,470 Whatever the end time detects. 95 00:09:28,640 --> 00:09:32,520 That's where it will go so it will display the last text. 96 00:09:32,570 --> 00:09:40,210 It be no their guess was low or high and in the game your skill causes function say is set. 97 00:09:40,220 --> 00:09:41,740 Game over. 98 00:09:41,900 --> 00:09:44,460 Else this condition will applaud. 99 00:09:44,470 --> 00:09:46,240 These are conditional statements. 100 00:09:46,250 --> 00:09:47,850 So if not this will happen. 101 00:09:47,860 --> 00:09:48,230 We'll see. 102 00:09:48,230 --> 00:09:54,620 Last resort techs who tell you you've got the answer wrong it will display a background colour of red 103 00:09:55,310 --> 00:10:03,080 and will show you all the random numbers that there has been guess who display the black background 104 00:10:03,080 --> 00:10:03,760 will be red. 105 00:10:03,770 --> 00:10:05,680 We are showing you are wrong. 106 00:10:05,870 --> 00:10:13,780 And then Honda made the background online 30 dahlby a text that says the number you guessed was too 107 00:10:14,020 --> 00:10:17,450 low land 31st else. 108 00:10:17,630 --> 00:10:27,950 If if you did no yes it is higher than the random number you display a text saying last guess was too 109 00:10:27,980 --> 00:10:28,610 high. 110 00:10:28,880 --> 00:10:37,000 Alright service low line 20 line in the guess the play I guess is less than they displayed random number 111 00:10:37,020 --> 00:10:38,490 it displays your. 112 00:10:38,660 --> 00:10:42,830 It displays a text to say the number guest is too low. 113 00:10:43,130 --> 00:10:47,540 Whereas on line 31 it does the opposite. 114 00:10:47,540 --> 00:10:49,240 Line thirty six. 115 00:10:49,490 --> 00:10:58,750 It requires a count of the attempt so every attempt you have records the tap the 10 the plus plus moves 116 00:10:58,810 --> 00:10:59,790 it and the increment. 117 00:10:59,800 --> 00:11:04,150 It keeps the increase in it and then the geathers value gets filled here. 118 00:11:04,160 --> 00:11:06,220 Online 37 equals 2. 119 00:11:06,290 --> 00:11:08,790 That's where you entail your tax. 120 00:11:08,810 --> 00:11:15,290 The geathers field for Kwas basically is used to foreclose on that input Botting forces mouse on the 121 00:11:15,410 --> 00:11:16,620 input button. 122 00:11:16,880 --> 00:11:23,250 So we are going to end this show here and continue in Part 2. 123 00:11:23,330 --> 00:11:24,400 Thanks for watching.